<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-07-18 15:29:41
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-26 10:26:23
 * @Description:
 *
-->
<template>
  <div class="graph-nodes-config">
    <el-dialog
      :class="[
        'config-dialog',
        currentComponent === 'vmConfig' ? 'vm-dialog' : '',
      ]"
      :title="title"
      :visible.sync="dialogVisible"
      width="35vw"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeClick"
    >
      <component
        :is="currentComponent"
        v-if="dialogVisible"
        ref="formComponent"
        :key="random"
        :params="businessData"
        :cell="cell"
        :graph-api="GraphApi"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="cancelClick">取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="confirmClick"
        >保存配置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cloudConfig from '@/components/graphNodes/cloud-config'
import vpnNetworkConfig from '@/components/graphNodes/vpc-network-config'
import privateNetworkConfig from '@/components/graphNodes/private-network-config'
import subnetConfig from '@/components/graphNodes/subnet-config'
import nsgConfig from '@/components/graphNodes/nsg-config'
import eipConfig from '@/components/graphNodes/eip-config'
import fipConfig from '@/components/graphNodes/fip-config'
import vmConfig from '@/components/graphNodes/vm-config'
import blockStorageConfig from '@/components/graphNodes/block-storage-config'
import routeConfig from '@/components/graphNodes/route-config'

export default {
  components: {
    cloudConfig,
    vpnNetworkConfig,
    privateNetworkConfig,
    subnetConfig,
    nsgConfig,
    eipConfig,
    fipConfig,
    vmConfig,
    blockStorageConfig,
    routeConfig
  },
  data() {
    return {
      title: '节点配置',
      currentComponent: null,
      dialogVisible: false,
      random: 1,
      GraphApi: null,
      businessData: null,
      cell: null
    }
  },
  methods: {
    showDialog(cell, GraphApi) {
      this.GraphApi = GraphApi
      this.cell = cell
      if (cell.type === 'cloud') {
        // 云商
        this.currentComponent = 'cloudConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'vpc') {
        // VPC网络
        this.currentComponent = 'vpnNetworkConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'pcn') {
        // 私有云网络
        this.currentComponent = 'privateNetworkConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'subnet') {
        // 子网
        this.currentComponent = 'subnetConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'securityGroup') {
        // 安全组
        this.currentComponent = 'nsgConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'vm') {
        // 虚机
        this.currentComponent = 'vmConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'elasticIp') {
        // 弹性IP
        this.currentComponent = 'eipConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'yunpan') {
        // 云盘
        this.currentComponent = 'blockStorageConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'floatIp') {
        // 浮动IP
        this.currentComponent = 'fipConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      } else if (cell.type === 'router') {
        // 路由
        this.currentComponent = 'routeConfig'
        this.businessData = JSON.parse(cell.businessData || '{}')
        this.dialogVisible = true
      }
      this.random = new Date().getTime() * 1000 + (this.random++ % 1000)
    },
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      this.$refs.formComponent.saveConfig(() => {
        this.dialogVisible = false
      })
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.vm-dialog {
  /deep/ .el-dialog {
    margin-top: 10vh !important;
    width: 40vw !important;
    min-width: 650px;
  }
  /deep/ .el-dialog__body {
    max-height: 65vh;
    overflow-y: auto;
    padding: 20px !important;
  }
}
</style>
